<script lang="ts">
export default {
  name: "xt-dialog",
};
</script>

<script setup lang="ts">
import { ElDialog } from "element-plus";
import Typings from "../../../typings";
interface Props extends /* @vue-ignore */ Typings.Dialog.props {
  width?: Typings.Dialog.props["width"];
  appendToBody?: Typings.Dialog.props["appendToBody"];
  closeOnClickModal?: Typings.Dialog.props["closeOnClickModal"];
}

withDefaults(defineProps<Props>(), {
  width: "72%",
  appendToBody: true,
  closeOnClickModal: false,
});
</script>

<template>
  <el-dialog
    class="xt-dialog"
    :width="width"
    :close-on-click-modal="closeOnClickModal"
    :append-to-body="appendToBody"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-dialog>
</template>

<style lang="scss">
@use "../../../scss/xt-dialog.scss";
@use "../../../scss/xt-overlay.scss";
</style>
